<template>
  <input type="button" value="批删" @click="DeleteState">
  <table class="table-bordered" border="1">
    <thead>
      
      <tr>
        <td>
          <input type="checkbox" v-model="allCheck" @change="GetAll">
        </td>
        <td>门店信息编号</td>
        <td>订单数量</td>
        <td>实际收款</td>
        <td>平均价格</td>
        <td>退款金额</td>
        <td>销售趋势</td>
        <td>门店编号</td>
        <td>操作</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in Stats">
         <td>
          <input type="checkbox" :checked="Ischeck" v-model="Reverchang" :value="item.shopStats_Id" @change="GetRever">
        </td>
        <td>{{ item.shopStats_Id }}</td>
        <td>{{ item.order_Num }}</td>
        <td>{{ item.actual_Collection }}</td>
        <td>{{ item.average_Price }}</td>
        <td>{{ item.refund_Amount }}</td>
        <td>{{ item.sales_Trends }}</td>
        <td>{{ item.shop_Id }}</td>
        <td>
            <a href="#" @click="DelShopStats(item.shopStats_Id)">删除</a>
            <a href="#" @click="UpShopStats(item.shopStats_Id)">修改</a>
        </td>
      </tr>
    </tbody>
  </table>
  <span>
    共{{ page.totalCount }}条数据,当前第{{ page.pageIndex }}/{{
      page.totalCount
    }}
    <a href="#" @click="Getpage('首页')">首页</a>
    <a href="#" @click="Getpage('上一页')">上一页</a>
    <a href="#" @click="Getpage('下一页')">下一页</a>
    <a href="#" @click="Getpage('尾页')">尾页</a>
    <select v-model="getCheng" @change="GetCheng">
      <option :value="0">--请选择--</option>
      <option :value="1">1条/页</option>
      <option :value="2">2条/页</option>
      <option :value="3">3条/页</option>
    </select>
    <input type="text" style="width:50px;height:50px" v-model="info">
    <input type="button" value="跳转" @click="GetInfo()">
  </span>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
const router = useRouter();
const Stats:any = ref([
  {
    shopStats_Id: 0,
    order_Num: 0,
    actual_Collection: 0,
    average_Price: 0,
    refund_Amount: 0,
    sales_Trends: "",
    shop_Id: 0,
  },
]);

// 全选
const allCheck = ref(false)
const Ischeck = ref(false)

const Reverchang=ref([])

// 全选
const GetAll = () => {
  // alert(allCheck.value)
  if (allCheck.value) {
    Ischeck.value = true;
    // map()方法创建一个新数组，对原来的数组中的每一个元素进行操作，返回操作后的新数组
    Reverchang.value=Stats.value.map((item: any) => {
      return item.S_id;
    })
  }
  else {
    Ischeck.value = false;
     Reverchang.value=[]
  }
}

// 反选
const GetRever = () => {
  if (Reverchang.value.length == Stats.value.length) {
    allCheck.value = true;
  }
  else {
    allCheck.value=false
  }
}

// 批删
const DeleteState = () => {

  if (!confirm("确定要删除吗？")) {
    return;
  }
  axios.get('https://localhost:7071/api/ShopStats/DelState', {
    params: {
      Idstring:Reverchang.value.toString()
    }
  })
    .then(res => {
      if (res.data > 0) {
        alert('批删成功')
        ShowShopStats();
    }
      else {
      alert('批删失败')
    }
  })
}
// 分页数据
const page = ref({
  pageIndex: 1,
  pageSize: 2,
  totalCount: 0,
  pageCount: 0,
});

const getCheng = ref(0);
const GetCheng = () => {
 page.value.pageSize=getCheng.value
  ShowShopStats();  
};

// 跳转数据
const info = ref("")
const GetInfo = () => {
    const Sta= info.value;
    page.value.pageIndex = Number(Sta);
    ShowShopStats();
}
// 生命周期
onMounted(() => {
  ShowShopStats();
});

// 显示
const ShowShopStats = () => {
  axios
    .get("https://localhost:7071/api/ShopStats/ShowShopStats", {
      params: {
        pageIndex: page.value.pageIndex,
        paheSize: page.value.pageSize,
      },
    })
    .then((res) => {
      //   console.log(res.data);
      Stats.value = res.data.pageDate;
      page.value.totalCount = res.data.totalCount;
      page.value.pageCount = res.data.pagelCount;
    });
};

// 分页
const Getpage = (ch: string) => {
  switch (ch) {
    case "首页":
      page.value.pageIndex = 1;
      break;
    case "上一页":
      if (page.value.pageIndex > 1) {
        page.value.pageIndex--;
      } else {
        alert("已经是第一页了");
      }
      break;
    case "下一页":
      if (page.value.pageIndex < page.value.pageCount) {
        page.value.pageIndex++;
      } else {
        alert("已经是尾页了");
      }
      break;
    case "尾页":
      page.value.pageIndex = page.value.pageCount;
      break;
  }
  ShowShopStats();
};

// 删除
const DelShopStats = (S_statsId:number) => {
    axios.delete('https://localhost:7071/api/ShopStats/DelShopStats', {
        params: {
          S_id:S_statsId  
        }
    })
    .then((res) => {
        if (res.data > 0) {
            alert('删除成功')
            location.href=('/ShowShopStatsView')
        }
        else {
             alert('删除失败')
        }
    })
}

// 跳转到修改页面
const UpShopStats = (S_statsId:number) => {
    router.push({
        name: 'UpShopStatsView',
        params: {
            id:S_statsId
        }
    })
}
</script>

<style scoped>
</style>